.main{
	min-height: calc(100vh - 100px);
	padding-top: 120px;
}
.note-content {
	text-align:center;
	margin: 20px auto;
	margin-bottom: 40px;
}
.note-content h1{
	margin-bottom:20px;
}
.mt100{
	margin-top:120px;
}

.img-item {
	position:relative;
    cursor: pointer;
}
.img-responsive{
	width: 100%;
    height:230px;
    display: block;
}

@media (max-width: 767px) {
	.img-responsive{
   		height:140px;
	}
}

.title{
	opacity: 0;
	position: absolute;
    width: 100%;
    height: 100%;
    font-size:22px;
	color:rgba(255,255,255,0);
	display: flex;
	display: -webkit-flex;
	align-items: center;
	-webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
}
.overlay {
    top: 0;
	opacity: 0;
    background-color:#333;
    background-size: cover;
    width: 100%;
    height: 100%;
    -webkit-transition: all .7s ease-out .1s;
    -moz-transition: all .7s ease-out .1s;
    transition: all .7s ease-out .1s;
    text-align: center;
	position: absolute;
}
.img-item:hover .overlay{
	opacity: 0.8;
}
.img-item:hover .title{
	opacity: 1;
	color:#fff;
}